<div class="flex md:flex-col md:fixed md:h-full pb-2 md:pb-32 w-full md:w-60! lg:w-60!">
    <div class="flex flex-col w-full">
        <form class="flex pb-4 hidden md:block" action="{% url 'pdf_overview_query' %}" method="GET" id="search_form">
            <input class="border h-10 rounded-sm! align-text-center focus:border-primary!
                          bg-slate-100 dark:bg-slate-800! creme:bg-creme-light-dark!
                          border-slate-400 dark:border-slate-600 creme:border-stone-400"
                    type="text" placeholder="Search for PDFs or #tags"
                    id="search_input"
                    name="search"
                    @keyup.enter="document.getElementById('search_form').submit()"
            />
        </form>
        <div class="flex flex-row w-full justify-between! md:flex-col gap-y-1
                    [&>*]:font-semibold [&>div]:px-3 md:[&>div]:px-2 [&>div]:py-2 md:[&>div]:py-1 [&>div]:rounded-md
                    [&>div>a]:flex [&>div>a]:flex-row [&>div>a]:items-center [&>div>a]:flex-row [&>div>a]:gap-x-2
                    [&>div]:hover:bg-slate-200 dark:[&>div]:hover:bg-slate-700 creme:[&>div]:hover:bg-creme-dark">
            <div {% if page == 'pdf_overview' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_overview' %}">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- source: https://www.svgrepo.com/svg/471517/home-02 -->
                        <!-- license: CC0 License-->
                        <path d="M9 21.0002V13.6002C9 13.0402 9 12.7601 9.10899 12.5462C9.20487 12.3581 9.35785 12.2051 9.54601 12.1092C9.75992 12.0002 10.0399 12.0002 10.6 12.0002H13.4C13.9601 12.0002 14.2401 12.0002 14.454 12.1092C14.6422 12.2051 14.7951 12.3581 14.891 12.5462C15 12.7601 15 13.0402 15 13.6002V21.0002M11.0177 2.76424L4.23539 8.03937C3.78202 8.39199 3.55534 8.5683 3.39203 8.7891C3.24737 8.98469 3.1396 9.20503 3.07403 9.4393C3 9.70376 3 9.99094 3 10.5653V17.8002C3 18.9203 3 19.4804 3.21799 19.9082C3.40973 20.2845 3.71569 20.5905 4.09202 20.7822C4.51984 21.0002 5.07989 21.0002 6.2 21.0002H17.8C18.9201 21.0002 19.4802 21.0002 19.908 20.7822C20.2843 20.5905 20.5903 20.2845 20.782 19.9082C21 19.4804 21 18.9203 21 17.8002V10.5653C21 9.99094 21 9.70376 20.926 9.4393C20.8604 9.20503 20.7526 8.98469 20.608 8.7891C20.4447 8.5683 20.218 8.39199 19.7646 8.03937L12.9823 2.76424C12.631 2.49099 12.4553 2.35436 12.2613 2.30184C12.0902 2.2555 11.9098 2.2555 11.7387 2.30184C11.5447 2.35436 11.369 2.49099 11.0177 2.76424Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="hidden md:block">Home</span>
                </a>
            </div>
            <div {% if page == 'shared_overview' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'shared_pdf_overview' %}">
                    <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" ><title>share</title>
                        <!-- source: https://www.svgrepo.com/svg/367868/share -->
                        <!-- license: PD License-->
                        <path d="M385 464Q357 464 339 445 320 426 320 399 320 390 321 388L171 303Q154 320 129 320 102 320 83 301 64 282 64 255 64 229 83 211 102 192 129 192 154 192 171 209L321 125Q320 122 320 111 320 85 339 67 357 48 384 48 410 48 429 67 447 85 448 111 448 138 429 157 410 176 384 176 361 176 341 159L191 244Q192 246 192 255 192 265 191 268L341 353Q361 336 385 336 415 336 431 355 447 374 447 400 447 426 431 445 415 464 385 464Z" />
                    </svg>
                    <span class="hidden md:block">Shared</span>
                </a>
            </div>
            <div {% if page == 'pdf_overview_starred' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_overview_query' %}?selection=starred">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- source: https://www.svgrepo.com/svg/471930/star-01 -->
                        <!-- license: CC0 License-->
                        <path d="M11.2827 3.45332C11.5131 2.98638 11.6284 2.75291 11.7848 2.67831C11.9209 2.61341 12.0791 2.61341 12.2152 2.67831C12.3717 2.75291 12.4869 2.98638 12.7174 3.45332L14.9041 7.88328C14.9721 8.02113 15.0061 8.09006 15.0558 8.14358C15.0999 8.19096 15.1527 8.22935 15.2113 8.25662C15.2776 8.28742 15.3536 8.29854 15.5057 8.32077L20.397 9.03571C20.9121 9.11099 21.1696 9.14863 21.2888 9.27444C21.3925 9.38389 21.4412 9.5343 21.4215 9.68377C21.3988 9.85558 21.2124 10.0372 20.8395 10.4004L17.3014 13.8464C17.1912 13.9538 17.136 14.0076 17.1004 14.0715C17.0689 14.128 17.0487 14.1902 17.0409 14.2545C17.0321 14.3271 17.0451 14.403 17.0711 14.5547L17.906 19.4221C17.994 19.9355 18.038 20.1922 17.9553 20.3445C17.8833 20.477 17.7554 20.57 17.6071 20.5975C17.4366 20.6291 17.2061 20.5078 16.7451 20.2654L12.3724 17.9658C12.2361 17.8942 12.168 17.8584 12.0962 17.8443C12.0327 17.8318 11.9673 17.8318 11.9038 17.8443C11.832 17.8584 11.7639 17.8942 11.6277 17.9658L7.25492 20.2654C6.79392 20.5078 6.56341 20.6291 6.39297 20.5975C6.24468 20.57 6.11672 20.477 6.04474 20.3445C5.962 20.1922 6.00603 19.9355 6.09407 19.4221L6.92889 14.5547C6.95491 14.403 6.96793 14.3271 6.95912 14.2545C6.95132 14.1902 6.93111 14.128 6.89961 14.0715C6.86402 14.0076 6.80888 13.9538 6.69859 13.8464L3.16056 10.4004C2.78766 10.0372 2.60121 9.85558 2.57853 9.68377C2.55879 9.5343 2.60755 9.38389 2.71125 9.27444C2.83044 9.14863 3.08797 9.11099 3.60304 9.03571L8.49431 8.32077C8.64642 8.29854 8.72248 8.28742 8.78872 8.25662C8.84736 8.22935 8.90016 8.19096 8.94419 8.14358C8.99391 8.09006 9.02793 8.02113 9.09597 7.88328L11.2827 3.45332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="hidden md:block">Starred</span>
                </a>
            </div>
            <div {% if page == 'pdf_highlight_overview' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_highlight_overview' %}">
                    <svg fill=currentColor version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                        class="w-5 h-5" viewBox="0 0 92.274 92.273" xml:space="preserve">
                            <!-- source: https://www.svgrepo.com/svg/118905/pencil-diagonal-outline-symbol-on-a-line -->
                            <!-- license: CC0 License-->
                            <path d="M12.879,83.265l18.137-6.483c2.271,0.721,4.869,0.177,6.717-1.671l48.378-50.906c2.555-2.556,2.556-6.714,0-9.27
                                L73.092,1.916c-2.534-2.535-6.646-2.554-9.207-0.062L12.523,49.85l-0.102,0.1c-1.803,1.801-2.327,4.396-1.589,6.67L4.476,74.91
                                c-0.523,1.512-0.14,3.188,0.991,4.318l3.058,3.06C9.665,83.428,11.362,83.809,12.879,83.265z M68.416,9.038L78.979,19.6
                                L32.992,67.991L19.627,54.627L68.416,9.038z M17.126,63.923l6.604,6.604l-10.162,3.632L17.126,63.923z"/>
                            <rect x="5.583" y="85.239" width="82.3" height="7.034"/>
                    </svg>
                    <span class="hidden md:block">Highlights</span>
                </a>
            </div>
            <div {% if page == 'pdf_comment_overview' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_comment_overview' %}">
                    <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                         class="w-5 h-5" viewBox="0 0 98.167 98.167" xml:space="preserve">
                        <!-- source: https://www.svgrepo.com/svg/158876/write-a-note -->
                        <!-- license: CC0 License-->
                        <path d="M80.708,12.67v-2.127c0-1.001-0.812-1.813-1.813-1.813H1.813C0.812,8.73,0,9.543,0,10.543v77.08
                            c0,1.002,0.811,1.813,1.813,1.813h77.082c1.002,0,1.813-0.813,1.813-1.813V48.776v-1.009l-9.656,9.654v22.357H9.657V18.386h61.395
                            v3.94L80.708,12.67z"/>
                        <path d="M47.654,50.303c-0.19,0.189-0.303,0.443-0.315,0.693l-1.847,12.851c-0.045,0.338,0.07,0.685,0.312,0.926
                            c0.207,0.206,0.48,0.319,0.773,0.319c0.053,0,0.104-0.004,0.156-0.012l12.792-1.84c0.285-0.007,0.547-0.119,0.754-0.328
                            l29.02-29.026l-12.609-12.61L47.654,50.303z"/>
                        <path d="M98.167,24.562c0-0.293-0.114-0.567-0.321-0.772L86.785,12.729c-0.395-0.399-1.15-0.399-1.547-0.001l-5.221,5.221
                            l12.608,12.609l5.222-5.223C98.053,25.128,98.167,24.854,98.167,24.562z"/>
                    </svg>
                    <span class="hidden md:block">Comments</span>
                </a>
            </div>
            <div {% if page == 'pdf_overview_archived' %} class="bg-slate-200 md:bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light" {% endif %}>
                <a href="{% url 'pdf_overview_query' %}?selection=archived">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- source: https://www.svgrepo.com/svg/470978/archive -->
                        <!-- license: CC0 License-->
                        <path d="M4 7.9966C3.83599 7.99236 3.7169 7.98287 3.60982 7.96157C2.81644 7.80376 2.19624 7.18356 2.03843 6.39018C2 6.19698 2 5.96466 2 5.5C2 5.03534 2 4.80302 2.03843 4.60982C2.19624 3.81644 2.81644 3.19624 3.60982 3.03843C3.80302 3 4.03534 3 4.5 3H19.5C19.9647 3 20.197 3 20.3902 3.03843C21.1836 3.19624 21.8038 3.81644 21.9616 4.60982C22 4.80302 22 5.03534 22 5.5C22 5.96466 22 6.19698 21.9616 6.39018C21.8038 7.18356 21.1836 7.80376 20.3902 7.96157C20.2831 7.98287 20.164 7.99236 20 7.9966M10 13H14M4 8H20V16.2C20 17.8802 20 18.7202 19.673 19.362C19.3854 19.9265 18.9265 20.3854 18.362 20.673C17.7202 21 16.8802 21 15.2 21H8.8C7.11984 21 6.27976 21 5.63803 20.673C5.07354 20.3854 4.6146 19.9265 4.32698 19.362C4 18.7202 4 17.8802 4 16.2V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="hidden md:block">Archive</span>
                </a>
            </div>
        </div>
    </div>
    {% if page == 'pdf_overview' or page == 'pdf_overview_starred' or page == 'pdf_overview_archived' %}
    <div class="hidden md:block md:flex md:flex-row items-center pt-6 mt-6
                border-t border-slate-300 dark:border-slate-600 creme:border-stone-400 gap-x-2 pb-2 pl-2 font-semibold">
        <div class="flex flex-row items-center justify-between! w-full">
            <div class="flex flex-row items-center gap-x-1">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- source: https://www.svgrepo.com/svg/471962/tag-01 -->
                    <!-- license: CC0 License-->
                    <path d="M8 8H8.01M2 5.2L2 9.67451C2 10.1637 2 10.4083 2.05526 10.6385C2.10425 10.8425 2.18506 11.0376 2.29472 11.2166C2.4184 11.4184 2.59135 11.5914 2.93726 11.9373L10.6059 19.6059C11.7939 20.7939 12.388 21.388 13.0729 21.6105C13.6755 21.8063 14.3245 21.8063 14.927 21.6105C15.612 21.388 16.2061 20.7939 17.3941 19.6059L19.6059 17.3941C20.7939 16.2061 21.388 15.612 21.6105 14.927C21.8063 14.3245 21.8063 13.6755 21.6105 13.0729C21.388 12.388 20.7939 11.7939 19.6059 10.6059L11.9373 2.93726C11.5914 2.59135 11.4184 2.4184 11.2166 2.29472C11.0376 2.18506 10.8425 2.10425 10.6385 2.05526C10.4083 2 10.1637 2 9.67452 2L5.2 2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2ZM8.5 8C8.5 8.27614 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.27614 7.5 8C7.5 7.72386 7.72386 7.5 8 7.5C8.27614 7.5 8.5 7.72386 8.5 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Tags</span>
                <div x-data="{ show_tag_mode_settings: false }" class="relative">
                    <svg id="show_tag_mode_settings" @click="show_tag_mode_settings = !show_tag_mode_settings"
                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="w-[16px] h-[16px] cursor-pointer text-slate-500! hover:text-black!
                                dark:text-slate-300 dark:hover:text-white! creme:text-stone-400! creme:hover:text-stone-700!">
                        <circle cx="12" cy="12" r="1"></circle>
                        <circle cx="12" cy="5" r="1"></circle>
                        <circle cx="12" cy="19" r="1"></circle>
                    </svg>

                    <div id="tag_mode_settings" x-show="show_tag_mode_settings" x-cloak
                         @click.away="show_tag_mode_settings = false"
                         @keyup.escape.window="show_tag_mode_settings = false"
                         class="flex flex-row items-center z-20 w-35 top-5 py-1 px-2  absolute rounded-sm border gap-x-2
                                bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light
                                border-slate-300 dark:border-slate-700 creme:border-creme-dark-light">
                        <span class="font-semibold">Tree Mode</span>

                        <div id="tag_mode_toggle"
                             class="flex items-center cursor-pointer w-8 h-4 rounded-full
                                    bg-slate-300 dark:bg-slate-600 creme:bg-creme-dark"
                             hx-post="{% url 'change_tree_mode' %}"
                             hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
                            {% if request.user.profile.tag_tree_mode %}
                            <div class="h-3 w-3 rounded-full bg-primary ml-4"></div>
                            {% else %}
                            <div class="h-3 w-3 rounded-full bg-slate-400 creme:bg-stone-400 ml-1"></div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <svg id="tags_open_collapse_toggle"
                 hx-post="{% url 'open_collapse_tags' %}"
                 hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 class="w-5 h-5 mr-2 cursor-pointer text-slate-500! hover:text-black!
                       dark:text-slate-300 dark:hover:text-white! creme:text-stone-400! creme:hover:text-stone-700!
                       {% if request.user.profile.tags_open %} rotate-90 {% endif %}">
                <path d="m9 18 6-6-6-6"></path>
            </svg>
        </div>
    </div>
    {% if request.user.profile.tags_open %}
    <div class="hidden md:block pl-3 overflow-auto flex-grow
                [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-gray-500 [&::-webkit-scrollbar-thumb]:bg-primary">
        {% include 'includes/tags.html' %}
    </div>
    {% endif %}
    {% endif %}
    <div class="hidden md:block md:w-52! lg:w-60! py-2 absolute bottom-0 fixed
                border-t border-slate-300 dark:border-slate-600 creme:border-stone-400
                text-sm text-slate-400 creme:text-stone-500">
        <a class="pl-1 hover:underline" href="https://github.com/mrmn2/PdfDing">PdfDing</a>
        <span> {{ VERSION }}</span>
    </div>
</div>
